<div class="wrapper">
    <app-breadcrumb [path]="path"></app-breadcrumb>
    <nz-row>
        <nz-col [nzSpan]="24">
            <ul nz-menu nzMode="horizontal" *ngIf="menuItems?.size > 0">
                <ng-container *ngFor="let entry of menuItems | forMap">
                    <li nz-menu-item [nzSelected]="selectedItem === entry.key" (click)="selectMenuItem(entry.key)">
                        {{entry.value}}
                    </li>
                </ng-container>
            </ul>
        </nz-col>
    </nz-row>
    <div class="page-content">
        <app-scrollview class="scrollview" *ngIf="selectedItem" [ngSwitch]="selectedItem">
            <ng-container *ngSwitchCase="'links'">
                <nz-form-item *ngFor="let d of linkDriver">
                    <nz-form-label [nzSpan]="2">Link {{d}}</nz-form-label>
                    <nz-form-control>
                        <ng-container *ngIf="userLinks.has(d)">
                            <input name="link-{{d}}" nz-input [readOnly]="true" [ngModel]="userLinks.get(d).username">
                        </ng-container>
                        <ng-container *ngIf="!userLinks.has(d)">
                            <button nz-button nzType="primary" (click)="linkUser(d)">
                                <i nz-icon nzType="{{d}}" nzTheme="outline"></i>
                                Link
                            </button>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </ng-container>
            <ng-container *ngSwitchCase="'profile'">
                <div *ngIf="user;then showUser;else loadUser"></div>
                <ng-template #showUser>
                    <form nz-form>
                        <nz-row>
                            <nz-col [nzSpan]="24">
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="2">Username</nz-form-label>
                                    <nz-form-control>
                                        <input nz-input type="text" name="username" [(ngModel)]="user.username"
                                               [disabled]="loading" readonly>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="2">Fullname</nz-form-label>
                                    <nz-form-control>
                                        <input nz-input type="text" name="fullname" [(ngModel)]="user.fullname"
                                               [disabled]="loading" [readonly]="!editable">
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item *ngIf="user.organization">
                                    <nz-form-label [nzSpan]="2">Organization</nz-form-label>
                                    <nz-form-control>
                                        <input nz-input type="text" name="organization"
                                               [ngModel]="user.organization" readonly>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label [nzSpan]="2">Ring</nz-form-label>
                                    <nz-form-control>
                                        <nz-select name="admin" [nzDisabled]="loading" *ngIf="currentAuthSummary.isAdmin()"
                                                   [(ngModel)]="user.ring">
                                            <nz-option nzValue="USER" nzLabel="USER"></nz-option>
                                            <nz-option nzValue="MAINTAINER" nzLabel="MAINTAINER"></nz-option>
                                            <nz-option nzValue="ADMIN" nzLabel="ADMIN"></nz-option>
                                        </nz-select>
                                        <input *ngIf="!currentAuthSummary.isAdmin()"nz-input type="text"
                                               name="admin" [ngModel]="user.ring" [readonly]="true">
                                    </nz-form-control>
                                </nz-form-item>
                            </nz-col>
                        </nz-row>
                        <nz-row *ngIf="editable">
                            <nz-col [nzSpan]="12">
                                <button nz-button nzDanger nzType="primary"
                                        nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this user ?"
                                        (nzOnConfirm)="clickDelete()">
                                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                                    Delete
                                </button>
                            </nz-col>
                            <nz-col [nzSpan]="12" class="alignRight">
                                <button nz-button nzType="primary" [nzLoading]="loading"
                                        (click)="clickSave()">
                                    <i nz-icon nzType="save" nzTheme="outline"></i>Save
                                </button>
                            </nz-col>
                        </nz-row>
                    </form>
                </ng-template>
                <ng-template #loadUser>
                    <nz-spin nzTip="Loading user..."></nz-spin>
                </ng-template>
            </ng-container>
            <div *ngSwitchCase="'groups'">
                <div class="wide column">
                    <app-data-table [withPagination]="10" [columns]="columnsGroups" [data]="groups"
                        [loading]="loadingGroups"></app-data-table>
                </div>
            </div>
            <div *ngSwitchCase="'contacts'">
                <div class="wide column">
                    <app-data-table [withPagination]="10" [columns]="columnsContacts" [data]="contacts"
                        [loading]="loadingContacts"></app-data-table>
                </div>
            </div>
            <div *ngSwitchCase="'authentication'">
                <nz-row>
                    <nz-col [nzSpan]="24">
                        <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                    </nz-col>
                </nz-row>
                <nz-row class="cardGrid" nzJustify="center">
                    <ng-container *ngFor="let d of drivers">
                        <nz-col [nzSpan]="6" *ngIf="mConsumers[d.type] || user.id === currentAuthSummary.user.id">
                            <div class="entity-card" [ngSwitch]="d.type">
                                <ng-container *ngSwitchCase="'local'">
                                    <div class="image">
                                        <span nz-icon nzType="lock" nzTheme="outline"></span>
                                    </div>
                                    <div class="content">
                                        Local
                                    </div>
                                </ng-container>
                                <ng-container *ngSwitchCase="'corporate-sso'">
                                    <div class="image">
                                        <span nz-icon nzType="safety-certificate" nzTheme="outline"></span>
                                    </div>
                                    <div class="content">
                                        Corporate SSO
                                    </div>
                                </ng-container>
                                <ng-container *ngSwitchCase="'ldap'">
                                    <ng-container *ngIf="!showLDAPSigninForm">
                                        <div class="image">
                                            <span nz-icon nzType="book" nzTheme="outline"></span>
                                        </div>
                                        <div class="content">
                                            LDAP
                                        </div>
                                    </ng-container>
                                        <ng-container *ngIf="showLDAPSigninForm">
                                            <form nz-form #ldapSigninForm="ngForm">
                                                <nz-form-item>
                                                    <nz-form-label>LDAP Bind*</nz-form-label>
                                                    <nz-form-control>
                                                        <input nz-input type="text" name="bind" ngModel required>
                                                    </nz-form-control>
                                                </nz-form-item>
                                                <nz-form-item>
                                                    <nz-form-label>{{ 'user_label_password' | translate }}*</nz-form-label>
                                                    <nz-form-control>
                                                        <input nz-input type="password" name="password" ngModel required>
                                                    </nz-form-control>
                                                </nz-form-item>
                                            </form>
                                        </ng-container>
                                </ng-container>
                                <ng-container *ngSwitchCase="'openid-connect'">
                                    <div class="image">
                                        <span nz-icon nzType="lock" nzTheme="outline"></span>
                                    </div>
                                    <div class="content">
                                        OpenID Connect
                                    </div>
                                </ng-container>
                                <ng-container *ngSwitchDefault>
                                    <div class="image">
                                        <span nz-icon nzType="{{d.type}}" nzTheme="outline"></span>
                                    </div>
                                    <div class="content">
                                        {{d.type | titlecase}}
                                    </div>
                                </ng-container>
                                <div class="foot">
                                    <ng-container *ngIf="mConsumers[d.type]" [ngSwitch]="d.type">
                                        <ng-container *ngSwitchCase="'local'">
                                            <button nz-button
                                                    (click)="clickConsumerDetails(mConsumers[d.type])">Details</button>
                                            <button *ngIf="user.id === currentAuthSummary.user.id"
                                                    nz-button nzType="primary"
                                                    (click)="clickConsumerLocalReset()">{{'account_password_btn_reset' |
                                                translate}}</button>
                                        </ng-container>
                                        <ng-container *ngSwitchDefault>
                                            <button nz-button
                                                    (click)="clickConsumerDetails(mConsumers[d.type])">Details</button>
                                            <button *ngIf="user.id === currentAuthSummary.user.id" nz-button nzDanger nzType="primary"
                                                    nz-popconfirm nzPopconfirmTitle="Are you sure you want to detach it ?"
                                                    (nzOnConfirm)="clickConsumerDetach(mConsumers[d.type])">Detach</button>
                                        </ng-container>
                                    </ng-container>
                                    <ng-container *ngIf="!mConsumers[d.type]" [ngSwitch]="d.type">
                                        <ng-container *ngSwitchCase="'local'">
                                            <button nz-button nzType="primary" [class.loading]="loadingLocalReset"
                                                    (click)="clickConsumerLocalReset()">Reset password</button>
                                        </ng-container>
                                        <ng-container *ngSwitchCase="'ldap'">
                                            <button nz-button nzType="primary"
                                                    (click)="clickConsumerLDAPSignin()">{{(showLDAPSigninForm ?
                                                'account_btn_submit' : 'account_btn_signin') | translate}}</button>
                                        </ng-container>
                                        <ng-container *ngSwitchDefault>
                                            <button nz-button nz-button nzType="primary" [routerLink]="'/auth/ask-signin/'+d.type"
                                                    [queryParams]="{redirect_uri: '/settings/user/'+user.username+'?item=authentication', require_mfa: false}">
                                                Sign in
                                            </button>
                                        </ng-container>
                                    </ng-container>
                                </div>
                            </div>
                        </nz-col>
                    </ng-container>
                </nz-row>
                <nz-row>
                    <nz-col [nzSpan]="24">
                        <h2>
                            My consumers
                            <span nz-icon nzType="plus-circle" nzTheme="fill" class="green" *ngIf="user.id === currentAuthSummary.user.id"
                                  (click)="clickConsumerCreate()"></span>
                        </h2>
                        <app-data-table [withFilter]="filterConsumers" [withPagination]="10" [columns]="columnsConsumers"
                                        [data]="myConsumers" [loading]="loadingAuthData">
                        </app-data-table>
                    </nz-col>
                </nz-row>
                <nz-row>
                    <nz-col [nzSpan]="24">
                        <h2>Sessions</h2>
                        <app-data-table [withFilter]="filterSessions" [withPagination]="10" [columns]="columnsSessions"
                                        [data]="sessions" [loading]="loadingAuthData"></app-data-table>
                    </nz-col>
                </nz-row>
            </div>
            <div *ngSwitchCase="'gpgkeys'">
                <div class="wide column">
                    <h2>Add a GPG Key</h2>
                    <form nz-form>
                        <nz-row>
                            <nz-col [nzSpan]="15">
                                <nz-form-item>
                                    <nz-form-control>
                                        <nz-input-group>
                                            <textarea rows="4" nz-input [(ngModel)]="importPublicGPGKey" [ngModelOptions]="{standalone: true}" placeholder="Paste here a GPG public key "></textarea>
                                        </nz-input-group>
                                    </nz-form-control>
                                </nz-form-item>
                            </nz-col>
                            <nz-col [nzSpan]="2" [nzOffset]="1">
                                <nz-form-item>
                                    <nz-form-control>
                                        <button nz-button nzType="primary" [nzLoading]="loading" [disabled]="loading || importPublicGPGKey === ''" (click)="addGPGKey()">Add</button>
                                    </nz-form-control>
                                </nz-form-item>
                            </nz-col>
                        </nz-row>
                    </form>

                    <h2>My GPG Keys</h2>
                    <nz-table #gpgKeysTable [nzData]="gpgKeys">
                        <thead>
                          <tr>
                            <th width="150px">Key ID</th>
                            <th>Public Key</th>
                            <th width="150px"></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let data of gpgKeysTable.data">
                            <td>{{data.key_id}}</td>
                            <td>
                                <textarea nz-input [ngModel]="data.public_key" readonly rows="10"></textarea>
                            </td>
                            <td>
                                <button nz-button nzDanger nzType="primary" nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this key ?" (nzOnConfirm)="deleteGPGKey(data)">Delete</button>
                            </td>
                          </tr>
                        </tbody>
                      </nz-table>
                </div>
            </div>
        </app-scrollview>
    </div>
</div>
<ng-template #modalHeaderTmpl>
    Details for consumer '{{selectedConsumer?.name}}'
    <nz-tag nzColor="error" *ngIf="selectedConsumer?.disabled">Disabled</nz-tag>
</ng-template>
